<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<style type="text/css">
	.form-signin {
	    background-color: #FFFFFF;
	    border: 1px solid #E5E5E5;
	    border-radius: 5px 5px 5px 5px;
	    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	    margin: 0 auto 20px;
	    max-width: 300px;
	    padding: 19px 29px 29px;
	}
	</style>
	<% include head.html %>
	<title><%=title%></title>
</head>
<body>
	<div id="head">
		<% include top_bar.html %>
		<script type="text/javascript">$('#index').addClass('active');</script>
	</div>
	<div id="wrap">
		<div id="main">
			<div id="content">
				<div class="panel">
				    <!-- <ul class="breadcrumb">
					    <li><a href="#">首页</a> <span class="divider">/</span></li>
					    <li><a href="#">Library</a> <span class="divider">/</span></li>
					    <li class="active">Data</li>
				    </ul> -->
				    <div id="innner">
						<div class="header-content">
							最新吐槽
							<button type="button" class="btn btn-success" id="new_t_btn" style="float:right">吐一个槽</button>
						</div>
						<div id="topic_list">
							<% if(topics.length > 0){ 
								for(var i=0;i < topics.length; i++){
							%>
							<div class="cell">
								<div class="user_block">
									<a href="#">
										<img src="head_img.jpg" class="img-rounded head_img_45">
									</a>
								</div>
								<div class="count_block"><a><%=topics[i].reply_count %></a><span>/<%=topics[i].click_count %></span></div>
								<div class="title_block">
									<a href="/topic/<%=topics[i].uuid%>"><%=topics[i].title%></a>
								</div>
								<div class="tag_block">
									<span class="label label-important" style="margin-top: 20px;"><%=topics[i].tag%></span>
								</div>
								<div class="time_block"><%=dateformat(topics[i].create_time, 'yyyy/mm/dd HH:MM')%></div>
							</div>
							<% } } %>
						</div>
						<div class="page">
							<div class="pagination">
							    <ul>
								    <li><a href="<%=url%><%=page.pageInfo.prev%>">«</a></li>
								    <% for(var i=page.firstIndex;i <= page.lastIndex;i++){ %>
								    <li <%if(page.pageInfo.current == i){%>class="active"<%}%> ><a href="<%=url%><%=i%>" ><%=i%></a></li>
								    <% } %>
								    <li><a href="<%=url%><%=page.pageInfo.next%>">»</a></li>
							    </ul>
						    </div>
						</div>
				    </div>
				</div>
			</div>
			<div id="sidebar">
				<% include user/user_info.html %>
				<div class="panel">
					<div class="header">热门吐槽</div>
					<div class="inner">
						ddd
						<%=l  %>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="foot">
	    <!-- Modal -->
		<div id="myModal" class="modal hide fade login_top" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="login_top_bi"></div>
			<div class="login_top_li"></div>
			<div class="container login_form_box">
				<form action="/logon" method="post" class="form-horizontal" id="form1">
					<div id="alert_box" class="alert alert-error" style="display: none;"></div>
					<div class="control-group">
						<label class="control-label" style="width:60px;">登录名：</label>
						<div class="controls" style="margin-left:80px;">
							<input type="text" id="loginname" name="loginname" placeholder="loginName"/>
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" style="width:60px;">密码：</label>
						<div class="controls" style="margin-left:80px;">
							<input type="password" id="password" name="password" placeholder="password"/>
						</div>
					</div>
					<div class="control-group">
						<div class="controls" style="margin-left:80px;">
							<button type="button" id="logon_btn" class="btn btn-primary" data-loading-text="Loading...">登录</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
			var l = '<%=l  %>';
			if(l == 'logon'){
				login();
			}
		})
		$('#new_t_btn').bind('click', function(){
			window.location.href = '/topic/newTopic';
		});
		function login(){
			$('#myModal').modal('show');
		}
		function logon(){
    		var name = $.trim($("#loginname").val());
    		var pass = $.trim($("#password").val());
    		if(name == ''){
    			show_alert("请填写账号");
	    		return;
    		}else{
    			$("#alert_box").css("display","none");
    		}
    		if(pass == ''){
    			show_alert("请填写密码");
	    		return;
    		}else{
    			$("#alert_box").css("display","none");
    		}
    		$("#form1").submit();
    	}
    	$("#logon_btn").click(function(){
    		var btn = $(this);
    		btn.button("loading");
    		logon();
    		setTimeout(function(){
    			btn.button("reset");
    		}, 1000);
    	})
    	function show_alert(content){
    		$("#alert_box").html(content);
    		$("#alert_box").css("display","block");
    	}
	</script>
</body>
	
</html>